<template>
  <section class="frames">
    <canvas id="canvas" class="w-96"></canvas>
  </section>
</template>

<script>
export default {
  data() {
    return {
      ctx: null
    }
  },
  mounted() {
    let canvas = document.getElementById('canvas')
    this.ctx = canvas.getContext('2d')

    let loader = new PxLoader()
    let images = []
    for (let i = 0; i <= 66; i++) {
      // images[i] = loader.addImage(require(`../assets/frames/zb${i + 1}.png`))
    }

    loader.addCompletionListener(() => {
      this.ctx.drawImage(images[0], 0, 0, 1920, 1080)
    })

    loader.start()
  },
  methods: {
    onScroll(e) {
      console.log(e)
    },
    changeFrame() {
      if (!this.ctx) {
        let canvas = document.getElementById('canvas')
        this.ctx = canvas.getContext('2d')
      }

      context.clearRect(0, 0, 1920, 1080)
      context.drawImage(images[index], 0, 0, 1920, 1080)
    }
  }
}
</script>

<style lang="scss" scoped>
.frames {
  height: 800vw;
  position: relative;
}

#canvas {
  position: sticky;
  top: 0;
  left: 0;
  transform: scale(0.8);
}
</style>